<div class="page-title">
	<h4>层管理</h4>
	<a class="pull-right help-link"nzi-document-center [docTitle]="'层管理'">
		<i class="anticon anticon-question-circle-o"></i>层管理使用指南
	</a>
</div>
<div class="page-header">
	<p style="margin-bottom: 0;">使用层管理，可以将依赖放在层中而不是部署包中，可确保部署包保持较小的体积</p>
</div>
<div class="padding-content area-col-white">
	<div class="table-top">
		<div class="table-operations clearfix">
			<div class="pull-left">
				<button nz-button nzType="primary" class="btn-add"   routerLink="create" >
					<i class="fas fa-plus"></i>创建层
				</button>
			</div>
			<div class="pull-right">
				 <nz-input-group nzSearch [nzSuffix]="suffixIconButton" style="width: 2rem;">
					<input type="text" [(ngModel)]="searchValue"  nz-input placeholder="请输入层名称查询" (keyup.enter)="getLayerList()">
				</nz-input-group>

          <ng-template #suffixIconButton>
            <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="searchValue" (click)="searchValue = '';getLayerList()"></i>
            <button nz-button nzSearch (click)="getLayerList()">
              <i class="anticon anticon-search"></i>
            </button>
          </ng-template>
          <button nz-button class="table-top-opt" (click)="refresh()" nz-popover [nzContent]="'刷新'"><i
            class="anticon anticon-reload"></i></button>
        </div>
      </div>
    </div>
    <div style="padding-bottom:0.20rem;">
      <nz-table #nzTable [nzData]="layerList" [nzTotal]="totalCount" [nzShowTotal]="rangeTemplate"
        [(nzPageSize)]="pageSize" [(nzPageIndex)]="pageNo" nzShowSizeChanger [nzLoading]="isLoading"
        [nzFrontPagination]="false" [nzNoResult]="noResult" (nzPageIndexChange)="getLayerList()" 
        (nzPageSizeChange)="getLayerList()" [nzShowPagination]="totalCount>10" class="table-fixed">
        <thead>
          <tr>
            <th >层名称</th>
            <th >最新版本</th>
            <th >最新版本描述</th>
            <th >最新版本运行环境</th>
            <th >最新版本创建时间</th>
            <th >操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of nzTable.data; let i = index;">
            <td nz-popover [nzContent]="data?.layerName">
              <a routerLink="detail/{{data.layerId}}">{{data?.layerName}}</a>
            </td>
            <td>{{data?.version}}</td>
            
            <td nz-popover [nzContent]="data?.description"><p>{{data?.description || '--'}}</p></td>
            <!-- <td>{{data?.runtimes}}</td> -->

            <td>
              <div class="lay-tag" *ngFor="let runtimes of data.runtimes;">
								{{runtimes}}
							</div>
            </td>

            <td>{{(data.createTime| date: 'yyyy-MM-dd HH:mm:ss') || '--'}}</td>
            <td class="table-opt">
              <a (click)="updatelayer(data.layerId)">新建版本</a>
            </td>
          </tr>
        </tbody>
       
        <ng-template #noResult>
          <ng-container *ngIf="!hasInputValue">
            <table-no-result-add title="抱歉，你还没有创建层！" action="去创建" (actionClick)="createLayer()">
            </table-no-result-add>
          </ng-container>
          <ng-container *ngIf="hasInputValue">
            <table-no-result-search></table-no-result-search>
          </ng-container>
        </ng-template>

        <ng-template #rangeTemplate let-range="range" let-total>
          共{{totalCount}}条
        </ng-template>
      </nz-table>
    </div>
  </div>
